<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form
            inline
            size="small"
            :model="from"
            ref="from"
            label-width="100px"
          >
            <el-form-item label="合约选择：">
              <el-select v-model="from.symbols" multiple placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.contractName"
                  :label="item.contractName"
                  :value="item.contractNoFull"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户选择：">
              <UserSearchable
                ref="user"
                v-model="from.traderId"
                :type="'getMasterAccountType'"
                :params="{
                  traderAccountType: listType,
                  followType: 2,
                  status: 1,
                }"
              >
                <template #dropdownTitle>
                  <span>id</span>
                  <span>昵称</span>
                  <span>权限</span>
                </template>
                <template v-slot:dropdown="{ item }">
                  <template v-if="listType == 2">
                    <span>{{ item.id }}</span>
                    <span>{{ item.nickName }}</span>
                    <span>{{ item.dataFactoryName }}</span>
                  </template>
                  <template v-if="listType == 1">
                    <span>{{ item.id }}</span>
                    <span>{{ item.account }}</span>
                    <span>{{ item.adminName }}</span>
                  </template>
                </template>
              </UserSearchable>
            </el-form-item>
            <el-form-item>
              <el-button
                class="mr10"
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="search()"
                >搜索</el-button
              >
              <el-button class="mr10" icon="el-icon-refresh" size="small" @click="reset()"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="statistics">
        <p>数据统计</p>
        <div class="listType">
          <el-radio
            v-model="listType"
            :label="2"
            border
            size="medium"
            @input="changeType"
            >训练员</el-radio
          >
          <el-radio
            v-model="listType"
            :label="1"
            border
            size="medium"
            @input="changeType"
            >主账户</el-radio
          >
        </div>
      </div>
      <el-table border
        ref="table"
        v-loading="loading"
        :data="tableData.contractResponses"
        style="width: 100%"
        size="mini"
        border
        highlight-current-row
      >
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column
          prop="contractName"
          label="合约"
          align="center"
          min-width="100"
        />
        <el-table-column prop="buy" label="买" align="center" min-width="100" />
        <el-table-column
          prop="sell"
          label="卖"
          align="center"
          min-width="100"
        />
        <el-table-column
          prop="contractSum"
          label="合计"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.contractSum == 0">0</span>
            <span v-if="scope.row.contractSum < 0" class="g"
              >卖{{ Math.abs(scope.row.contractSum) }}</span
            >
            <span v-if="scope.row.contractSum > 0" class="r"
              >买{{ scope.row.contractSum }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="contractFloatingProfit"
          label="浮盈"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.contractFloatingProfit == 0">0</span>
            <span v-if="scope.row.contractFloatingProfit < 0" class="g">{{
              scope.row.contractFloatingProfit
            }}</span>
            <span v-if="scope.row.contractFloatingProfit > 0" class="r">{{
              scope.row.contractFloatingProfit
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="record">
        <div class="txt">
          <el-checkbox v-model="checked">显示持仓</el-checkbox>
        </div>
        <div class="txt">
          <span class="sp1">总手数:</span>
          <span class="sp2">{{ info.tradeCountSum || 0 }}</span>
        </div>
        <div class="txt">
          <span class="sp1">总浮盈: </span>
          <span :class="info.floatingProfitSum > 0 ? 'sp3' : 'sp4'">{{
            info.floatingProfitSum || 0
          }}</span>
        </div>
        <div class="txt" v-show="listType == 2">
          <span class="sp1">总平盈:</span>
          <span :class="info.flatProfitSum > 0 ? 'sp3' : 'sp4'">{{
            info.flatProfitSum || 0
          }}</span>
        </div>
        <div class="txt" v-show="listType == 2">
          <span class="sp1">总服务费:</span>
          <span :class="info.feeSum > 0 ? 'sp3' : 'sp4'">{{
            info.feeSum || 0
          }}</span>
        </div>
        <div class="txt" v-show="listType == 2">
          <span class="sp1">总盈利:</span>
          <span :class="info.profitSum > 0 ? 'sp3' : 'sp4'">{{
            info.profitSum || 0
          }}</span>
        </div>
      </div>
      <!-- //训练员列表 -->
      <el-table border
        ref="table"
        v-loading="loading"
        :data="tableData.accountResponses"
        style="width: 100%"
        size="mini"
        border
        highlight-current-row
        @sort-change="sortChangeSelect"
      >
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column
          prop="userName"
          label="账户/用户名"
          align="center"
          min-width="150"
        />
        <el-table-column
          prop="rights"
          label="当前权益"
          align="center"
          min-width="100"
          sortable
        />
        <el-table-column
          v-if="checked"
          prop="contractPositionVoList"
          label="持仓"
          align="center"
          min-width="400"
        >
          <template slot-scope="scope">
            <el-table border
              :data="scope.row.contractPositionVoList"
              border
              style="width: 100%"
            >
              <el-table-column prop="contractName" label="合约">
              </el-table-column>
              <el-table-column prop="row" label="方向手数">
                <template slot-scope="scope">
                  <span v-if="scope.row.direction == 1"
                    >买{{ scope.row.volume }}</span
                  >
                  <span v-if="scope.row.direction == 2"
                    >卖{{ scope.row.volume }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="floatingProfit" label="浮盈">
                <template slot-scope="scope">
                  <span v-if="scope.row.floatingProfit == 0">0</span>
                  <span v-if="scope.row.floatingProfit < 0" class="g">{{
                    scope.row.floatingProfit
                  }}</span>
                  <span v-if="scope.row.floatingProfit > 0" class="r">{{
                    scope.row.floatingProfit
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          prop="volume"
          label="持仓手数"
          align="center"
          min-width="100"
          sortable
        />
        <el-table-column
          prop="floatingProfit"
          label="当日净浮盈"
          align="center"
          min-width="100"
          sortable
        >
          <template slot-scope="scope">
            <span v-if="scope.row.floatingProfit == 0">0</span>
            <span v-if="scope.row.floatingProfit < 0" class="g">{{
              scope.row.floatingProfit
            }}</span>
            <span v-if="scope.row.floatingProfit > 0" class="r">{{
              scope.row.floatingProfit
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="floatWithFee"
          label="当日浮盈含手续费"
          align="center"
          min-width="100"
          sortable
        >
          <template slot-scope="scope">
            <span v-if="scope.row.floatWithFee == 0">0</span>
            <span v-if="scope.row.floatWithFee < 0" class="g">{{
              scope.row.floatWithFee
            }}</span>
            <span v-if="scope.row.floatWithFee > 0" class="r">{{
              scope.row.floatWithFee
            }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="flatProfit"
          label="当日净平盈"
          align="center"
          min-width="100"
          v-if="listType == 2"
          sortable
        >
          <template slot-scope="scope">
            <span v-if="scope.row.flatProfit == 0">0</span>
            <span v-if="scope.row.flatProfit < 0" class="g">{{
              scope.row.flatProfit
            }}</span>
            <span v-if="scope.row.flatProfit > 0" class="r">{{
              scope.row.flatProfit
            }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="checked && listType == 1"
          prop="traderFollowMes"
          label="相关持仓"
          align="center"
          min-width="700"
          sortable
        >
          <template slot-scope="scope">
            <div
              class="taraderFollowMes"
              v-for="item in scope.row.traderFollowMes"
              :key="item.userId"
            >
              <h2>{{ item.userName }}</h2>
              <el-table border
                :data="item.contractPositionVoList"
                border
                style="width: 100%"
              >
                <el-table-column prop="contractName" label="合约">
                </el-table-column>
                <el-table-column prop="row" label="方向手数">
                  <template slot-scope="scope">
                    <span v-if="scope.row.direction == 1"
                      >买{{ scope.row.volume }}</span
                    >
                    <span v-if="scope.row.direction == 2"
                      >卖{{ scope.row.volume }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="floatingProfit" label="浮盈">
                  <template slot-scope="scope">
                    <span v-if="scope.row.floatingProfit == 0">0</span>
                    <span v-if="scope.row.floatingProfit < 0" class="g">{{
                      scope.row.floatingProfit
                    }}</span>
                    <span v-if="scope.row.floatingProfit > 0" class="r">{{
                      scope.row.floatingProfit
                    }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="flatWithFee"
          label="当日平盈含手续费"
          align="center"
          min-width="100"
          v-if="listType == 2"
          sortable
        >
          <template slot-scope="scope">
            <span v-if="scope.row.flatWithFee == 0">0</span>
            <span v-if="scope.row.flatWithFee < 0" class="g">{{
              scope.row.flatWithFee
            }}</span>
            <span v-if="scope.row.flatWithFee > 0" class="r">{{
              scope.row.flatWithFee
            }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="fee"
          label="当日服务费"
          align="center"
          min-width="100"
          v-if="listType == 2"
          sortable
        />

        <el-table-column
          prop="tradeCount"
          label="交易手数"
          align="center"
          min-width="100"
          v-if="listType == 2"
          sortable
        />

        <el-table-column
          label="操作"
          min-width="130"
          fixed="right"
          align="center"
          v-if="listType == 2"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleDetails(scope.row)"
              >当日成交</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- //主账户列表 -->
      <!-- <el-table border
        ref="table"
        v-loading="loading"
        :data="tableData1.accountResponses"
        style="width: 100%"
        size="mini"
        border
        highlight-current-row
      >
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column
          prop="userName"
          label="账户/用户名"
          align="center"
          min-width="150"
        />
        <el-table-column
          prop="rights"
          label="当前权益"
          align="center"
          min-width="100"
        />
        <el-table-column
          v-if="checked"
          prop="contractPositionVoList"
          label="持仓"
          align="center"
          min-width="400"
        >
          <template slot-scope="scope">
            <el-table border
              :data="scope.row.contractPositionVoList"
              border
              style="width: 100%"
            >
              <el-table-column prop="contractName" label="合约">
              </el-table-column>
              <el-table-column prop="row" label="方向手数">
                <template slot-scope="scope">
                  <span v-if="scope.row.direction == 1"
                    >买{{ scope.row.volume }}</span
                  >
                  <span v-if="scope.row.direction == 2"
                    >卖{{ scope.row.volume }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="floatingProfit" label="浮盈">
                <template slot-scope="scope">
                  <span v-if="scope.row.floatingProfit == 0">0</span>
                  <span v-if="scope.row.floatingProfit < 0" class="g">{{
                    scope.row.floatingProfit
                  }}</span>
                  <span v-if="scope.row.floatingProfit > 0" class="r">{{
                    scope.row.floatingProfit
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          prop="floatingProfit"
          label="总浮盈"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.floatingProfit == 0">0</span>
            <span v-if="scope.row.floatingProfit < 0" class="g">{{
              scope.row.floatingProfit
            }}</span>
            <span v-if="scope.row.floatingProfit > 0" class="r">{{
              scope.row.floatingProfit
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="130"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleDetails(scope.row)"
              >当日成交</el-button
            >
          </template>
        </el-table-column>
      </el-table> -->
      <div class="block">
        <el-pagination
          :page-sizes="[15, 30, 45, 60]"
          :page-size="from.limit"
          :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>

    <!-- 当日成交 -->
    <el-dialog :visible.sync="visible" width="1000px">
      <el-table border :data="list" border style="width: 100%">
        <el-table-column prop="userName" label="账户/用户名"></el-table-column>
        <el-table-column prop="contractName" label="合约名"></el-table-column>
        <el-table-column prop="row" label="方向手数">
          <template slot-scope="scope">
            <span v-if="scope.row.direction == 1"
              >买{{ scope.row.tradeCount }}</span
            >
            <span v-if="scope.row.direction == 2"
              >卖{{ scope.row.tradeCount }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="transactionPrice"
          label="成交价"
        ></el-table-column>
        <el-table-column prop="closingTime" label="成交时间"></el-table-column>
        <el-table-column prop="fee" label="当日服务费"></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="listlimit"
          :current-page="listpage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listtotal"
          @size-change="listSizeChange"
          @current-change="listPageChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { exchangecontractGetOption } from "@/api/transaction";
import UserSearchable from "@/components/UserSearchable";

import {
  RealTimeMonitoringList,
  RealTimeMonitoringInfo,
  RealTimeMonitoringGetMaster,
} from "@/api/realTimeMonitor";
export default {
  name: "realTimeMonitor",
  data() {
    return {
      options: [],
      from: {
        symbols: [],
        page: 1,
        limit: 15,
      },
      checked: true,
      loading: false,
      info: {},
      tableData: {
        accountResponses: [],
        contractResponses: [],
        total: 0,
      },
      tableData1: {
        accountResponses: [],
        contractResponses: [],
        total: 0,
      },
      userId: "",
      list: [],
      listtotal: 0,
      listpage: 1,
      listlimit: 10,
      visible: false,
      timerId: null,
      listType: 1, //2训练员  1主账户

      // 排序
      sortlist: {},
    };
  },
  components: {
    UserSearchable,
  },
  mounted() {
    this.getOptionList();
    // 创建定时器
    let that = this;
    this.timerId = setInterval(() => {
      // 定时器的逻辑  更改为 1秒
      that.getlist();
    }, 1000);
  },
  beforeDestroy() {
    // 清除定时器
    if (this.timerId) {
      console.log("销毁定时器");
      clearInterval(this.timerId);
    }
  },
  methods: {
    search() {
      this.from.page = 1;
      this.from.limit = 15;
      this.getlist();
    },
    reset() {
      this.from = {
        symbols: [],
        page: 1,
        limit: 15,
      };
      this.getlist();
    },
    getOptionList() {
      exchangecontractGetOption()
        .then((res) => {
          console.log("合约全列表", res);
          this.options = res;
          this.getlist();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleDetails(row) {
      console.log("详情", row);
      this.userId = row.userId;
      this.list = [];
      this.listpage = 1;
      this.listlimit = 10;
      this.visible = true;
      this.getDetailsList();
    },
    listSizeChange(val) {
      this.listlimit = val;
      this.getDetailsList();
    },
    listPageChange(page) {
      this.listpage = page;
      this.getDetailsList();
    },
    getDetailsList() {
      let data = {
        userId: this.userId,
        page: this.listpage,
        limit: this.listlimit,
      };
      RealTimeMonitoringInfo(data)
        .then((res) => {
          console.log("成交明细", res);
          this.list = res.list;
          this.listtotal = res.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getlist() {
      // this.loading = true
      let obj = {};
      obj.page = this.from.page;
      obj.limit = this.from.limit;
      obj.symbols = this.from.symbols;
      obj.order = this.sortlist;
      obj.traderId = this.from.traderId;

      // console.log('99999999999999', obj)

      if (this.listType == 2) {
        RealTimeMonitoringList(obj)
          .then((res) => {
            console.log("实时监控管理---列表信息", res);
            this.info = res;
            this.tableData.accountResponses = res.accountResponses.list;
            this.tableData.contractResponses = res.contractResponses;
            this.tableData.total = res.accountResponses.total;
            // this.loading = false
          })
          .catch((err) => {
            console.log(err);
            // this.loading = false
          });
      } else {
        RealTimeMonitoringGetMaster(
          this.from.page,
          this.from.limit,
          this.from.symbols
        )
          .then((res) => {
            console.log("实时监控管理---主账户列表信息", res);
            this.info = res;
            this.tableData.accountResponses = res.accountResponses.list;
            this.tableData.contractResponses = res.contractResponses;
            this.tableData.total = res.accountResponses.total;
            // this.loading = false
          })
          .catch((err) => {
            console.log(err);
            // this.loading = false
          });
      }
    },
    pageChange(page) {
      this.from.page = page;
      this.getlist();
    },
    handleSizeChange(val) {
      this.from.limit = val;
      this.getlist();
    },
    changeType() {
      this.getlist();
      this.from.traderId="";
      this.$nextTick(() => {
        this.$refs.user.remoteMethod();
        this.$refs.user.setLabelValue();
      });
    },

    // 排序
    sortChangeSelect(column) {
      console.log(column);
      console.log("当前列表的字段名：", column.prop);
      console.log("当前的排序：", column.order);

      var key = column.prop;
      var value = column.order;

      if (value == "ascending") {
        value = "asc";
      }
      if (value == "descending") {
        value = "desc";
      }

      // console.log('键', key)
      // console.log('值', value)

      let object = {};

      // 更改键值对
      object[key] = value;

      // console.log(object)

      let obj = {};
      obj.page = this.from.page;
      obj.limit = this.from.limit;
      obj.symbols = this.from.symbols;
      obj.order = {};

      // 排序赋值更新
      if (value != null) {
        obj.order = object;
        this.sortlist = object;
      } else {
        obj.order = {};
        this.sortlist = {};
      }

      console.log(obj);

      // return
      RealTimeMonitoringList(obj)
        .then((res) => {
          console.log("实时监控管理---列表信息", res);
          this.info = res;
          this.tableData.accountResponses = res.accountResponses.list;
          this.tableData.contractResponses = res.contractResponses;
          this.tableData.total = res.accountResponses.total;
          // this.loading = false
        })
        .catch((err) => {
          console.log(err);
          // this.loading = false
        });
    },
  },
};
</script>

<style scoped lang="scss">
.r {
  color: #ff210d;
}

.g {
  color: #019101;
}

.statistics {
  width: 100%;
  padding: 10px 15px;
  background-color: #f4f4f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: #333333;
}

.record {
  margin-top: 30px;
  width: 100%;
  padding: 10px 15px;
  background-color: #f4f4f5;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #333333;

  .txt {
    margin-right: 25px;

    .sp2 {
      color: #333333;
    }

    .sp3 {
      color: #ff210d;
    }

    .sp4 {
      color: #019101;
    }
  }
}

.taraderFollowMes {
  display: flex;
  align-items: center;

  h2 {
    width: 200px;
  }
}
</style>
